<script setup lang="ts">


import {ElMessageBox} from "element-plus";
import {useAccountStore} from "../../store/AccountStore.ts";

const store = useAccountStore();

const goBack = () => window.history.back();

const promptAdd = () => {
  ElMessageBox.prompt("请输入Cookie").then(({value}) => store.addAccount(value))
}
</script>

<template>
  <div>
    <el-page-header @back="goBack">
      <template #content>
        账号管理
      </template>
      <template #extra>
        <div>
          <el-button type="success" @click="promptAdd">添加</el-button>
        </div>
      </template>
    </el-page-header>
    <div>
      <el-table :data="store.accounts">
        <el-table-column label="操作" width="100px">
          <template #default="scope">
            <el-button type="danger" @click="store.removeAccount(scope.row.userId)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="用户ID" width="100px"/>
        <el-table-column label="默认用户" width="100px">
          <template #default="scope">
            <el-button v-if="!scope.row.defaultUser" type="primary" @click="store.setDefaultAccount(scope.row.userId)">设为默认
            </el-button>
            <span v-else>✓</span>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名"/>
      </el-table>
    </div>
  </div>
</template>

<style scoped>

</style>